<template>
  <view class="reservation-page">
    <up-card :title="prodName" margin="0rpx">
      <template #body>
        <view class="" slot="body">
          <!-- 预约须知 -->
          <view class="notice-container">
            <view class="notice-title" @click="showNotice = !showNotice"
              ><up-icon color="#2b8afd" name="info-circle-fill"></up-icon
              >预约须知</view
            >
            <view class="notice-content" v-html="content" v-if="showNotice">
            </view>
          </view>
        </view>
      </template>
    </up-card>

    <!-- 表单内容区 -->
    <scroll-view scroll-y class="form-scroll">
      <!-- 收货信息地址展示 -->
      <view class="delivery-info-container" v-if="receiveAddr.receiver">
        <view class="delivery-title">
          <up-icon color="#52c41a" name="map-fill"></up-icon>
          检测样品寄件地址
        </view>
        <view class="delivery-content">
          <view class="delivery-item">
            <text class="label">收件人：</text>
            <text class="value">{{ receiveAddr.receiver }}</text>
          </view>
          <view class="delivery-item">
            <text class="label">联系电话：</text>
            <text class="value">{{ receiveAddr.mobile }}</text>
          </view>
          <view class="delivery-item">
            <text class="label">详细地址：</text>
            <text class="value">{{ receiveAddr.addr }}</text>
          </view>
        </view>
      </view>
      <view class="form-container">
        <!-- 样品基本信息 -->
        <up-form
          :model="formData"
          ref="uForm"
          :rules="rules"
          labelPosition="top"
          label-width="200rpx"
        >
          <view class="pup-sku-count">
            <view class="num-wrap">
              <view class="minus" @tap="onCountMinus">
                <text class="row" />
              </view>
              <view class="text-wrap">
                <input type="number" v-model="prodNum" />
              </view>
              <view class="plus" @tap="onCountPlus">
                <text class="row" />
                <text class="col" />
              </view>
            </view>
            <view class="count-name"> 样品数量 </view>
          </view>

          <up-form-item label="样品编号" prop="sampleNo">
            <up-input
              v-model="formData.sampleNo"
              placeholder="请输入样品编号"
            ></up-input>
          </up-form-item>

          <up-form-item label="样品名称" prop="sampleName">
            <up-input
              v-model="formData.sampleName"
              placeholder="请输入样品名称"
            ></up-input>
          </up-form-item>

          <!-- 单选或多选规格 -->
          <view class="pup-sku-body">
            <view class="pup-sku-area">
              <view class="sku-box">
                <block v-for="(item, index) in jsonData" :key="index">
                  <view class="items sku-text">
                    <text class="sku-kind">
                      {{ isShowName(item.name) }}
                    </text>
                    <view v-if="item.infoFrom === 'in'">
                      <up-input
                        v-if="item.choseType === 'input'"
                        v-model="item.value"
                        border="bottom"
                        placeholder="请输入"
                        clearable
                      />
                      <up-textarea
                        v-else-if="item.choseType == 'textarea'"
                        v-model="item.value"
                        placeholder="请输入内容"
                      ></up-textarea>
                      <block
                        v-else-if="
                          item.choseType === 'single' ||
                          item.choseType === 'checkbox'
                        "
                      >
                        <text
                          v-for="skuLineItem in item.value"
                          :key="skuLineItem"
                          class="sku-choose-item"
                          :class="[skuLineItem.select == true ? 'active' : '']"
                          @click="toggleSelect(item, skuLineItem)"
                        >
                          {{ skuLineItem.name }}
                        </text>
                      </block>

                      <!-- 选择元素 -->
                      <view
                        v-if="item.choseType === 'elements'"
                        class="elements-section"
                      >
                        <u-button
                          @click="toChooseElements(item)"
                          type="primary"
                          shape="circle"
                          size="medium"
                          icon="plus"
                          class="choose-elements-btn"
                        >
                          选择元素
                        </u-button>
                        <view
                          v-if="item.value && item.value.length > 0"
                          class="selected-elements"
                        >
                          <text class="selected-label">已选择元素：</text>
                          <view class="elements-tags">
                            <u-tag
                              v-for="element in item.value"
                              :key="element.id"
                              :text="`${element.name} (${element.symbol})`"
                              type="success"
                              shape="circle"
                              plain
                              closable
                              @close="removeElement(item, element)"
                              class="element-tag"
                            />
                          </view>
                        </view>
                        <view v-else class="elements-placeholder">
                          <u-icon
                            name="info-circle"
                            color="#999"
                            size="24"
                          ></u-icon>
                          <text>请选择需要测试的元素</text>
                        </view>
                      </view>
                    </view>
                    <view v-else-if="item.infoFrom === 'many'">
                      <text
                        v-for="manyItem in item.value"
                        :key="manyItem.name"
                        class="sku-choose-item"
                        :class="[manyItem.select == true ? 'active' : '']"
                        @click="toggleSelect(item, manyItem, true)"
                      >
                        {{ manyItem.name }}
                        <text class="price-text">
                          {{ manyItem.price }}元/样
                        </text>
                      </text>
                    </view>
                    <view v-else-if="item.infoFrom === 'needReturn'">
                      <!-- 是否两个选项，是则设置item.value为true,否则为false -->
                      <view
                        class="sku-choose-item"
                        :class="[item.value ? 'active' : '']"
                        @click="changeNeedReturn(item, true)"
                      >
                        <text>是</text>
                      </view>
                      <view
                        class="sku-choose-item"
                        :class="[!item.value ? 'active' : '']"
                        @click="changeNeedReturn(item, false)"
                      >
                        <text>否</text>
                      </view>
                    </view>
                    <view v-else-if="item.infoFrom === 'needCloudVideo'">
                      <!-- 是否两个选项，是则设置item.value为true,否则为false -->
                      <view
                        class="sku-choose-item"
                        :class="[needCloudVideo ? 'active' : '']"
                        @click="needCloudVideoFunc(item)"
                      >
                        <text>是</text>
                      </view>
                      <view
                        class="sku-choose-item"
                        :class="[!needCloudVideo ? 'active' : '']"
                        @click="dontNeedCloudVideo(item)"
                      >
                        <text>否</text>
                      </view>
                      <view class="items sku-text" v-if="needCloudVideo">
                        <text class="sku-kind"> 云视频时长(分钟) </text>
                      </view>
                      <view v-if="needCloudVideo">
                        <uni-number-box
                          disabled
                          v-model="item.value"
                          @change="calcPrice"
                          :step="15"
                          :min="60"
                          :max="10000"
                        />
                      </view>
                    </view>
                    <view v-else-if="item.infoFrom === 'etchingDepth'">
                      <!-- 是否两个选项，是则设置item.value为true,否则为false -->
                      <view>
                        <uni-number-box
                          @change="calcPrice"
                          v-model="item.value"
                          :min="0"
                        />
                      </view>
                    </view>
                    <view v-else-if="item.infoFrom === 'SEMTsetTime'">
                      <view>
                        <uni-number-box
                          disabled
                          @change="calcPrice"
                          v-model="item.value"
                          :min="60"
                        />
                      </view>
                    </view>
                    <view v-else-if="item.infoFrom === 'testTime'">
                      <view>
                        <uni-number-box
                          disabled
                          @change="calcPrice"
                          v-model="item.value"
                          :min="60"
                        />
                      </view>
                    </view>
                    <view
                      v-else-if="
                        item.infoFrom === 'joinTimes' &&
                        selectedPropList.some((prop) =>
                          prop.includes('拼接测试')
                        )
                      "
                    >
                      <view>
                        <uni-number-box
                          @change="calcPrice"
                          v-model="item.value"
                          :min="1"
                        />
                      </view>
                    </view>
                    <view
                      v-else-if="
                        item.infoFrom === 'roiTimes' &&
                        !selectedPropList.some((prop) =>
                          prop.includes('不处理')
                        )
                      "
                    >
                      <view>
                        <uni-number-box
                          @change="calcPrice"
                          v-model="item.value"
                          :min="1"
                        />
                      </view>
                    </view>
                    <view v-else>
                      <view class="sku-box">
                        <block
                          v-for="(
                            skuGroupItem, skuGroupItemIndex
                          ) in skuGroupList"
                          :key="skuGroupItemIndex"
                        >
                          <view
                            v-for="(skuLine, key) in skuGroupItem"
                            :key="key"
                            class="items sku-text"
                          >
                            <block v-if="key === item.name">
                              <view class="con">
                                <text
                                  v-for="skuLineItem in skuLine"
                                  :key="skuLineItem"
                                  class="sku-choose-item"
                                  :class="[
                                    selectedPropList.indexOf(
                                      key + ':' + skuLineItem
                                    ) !== -1
                                      ? 'active'
                                      : '',
                                  ]"
                                  @click="
                                    toChooseItem(
                                      skuGroupItemIndex,
                                      skuLineItem,
                                      key
                                    )
                                  "
                                >
                                  {{ skuLineItem }}
                                </text>
                              </view>
                            </block>
                          </view>
                        </block>
                      </view>
                    </view>
                    <!-- 注意事项 -->
                    <view v-if="item.wainInfo" class="notice-item">
                      <u-icon
                        name="info-circle"
                        color="#ff9500"
                        size="28rpx"
                        style="margin-right: 12rpx"
                      />
                      <text class="notice-text">{{ item.wainInfo }}</text>
                    </view>
                  </view>
                </block>
              </view>
            </view>
          </view>

          <view>
            <text class="sku-kind"
              >联系方式{{ needCloudVideo ? " *" : "" }}</text
            ></view
          >
          <view>
            <input
              v-model="formData.contactPhone"
              :placeholder="
                needCloudVideo
                  ? '请输入手机号（选择云视频时为必填）'
                  : '请输入手机号'
              "
              type="number"
            />
          </view>
          <view v-if="showDeliveryAddr">
            <view> <text class="sku-kind">收货地址</text></view>
            <!-- 收货地址 -->
            <view class="delivery-addr" @tap="toAddrListPage">
              <view v-if="!userAddr" class="addr-bg">
                <view class="add-addr">
                  <view class="plus-sign-img">
                    <image src="@/static/images/icon/plus-sign.png" />
                  </view>
                  <text>新增收货地址</text>
                </view>
                <view class="arrow empty" />
              </view>
              <view v-if="userAddr" class="addr-bg whole">
                <view class="addr-icon">
                  <image src="@/static/images/icon/addr.png" />
                </view>
                <view class="user-info">
                  <text class="item">
                    {{ userAddr.receiver }}
                  </text>
                  <text class="item">
                    {{ userAddr.mobile }}
                  </text>
                </view>
                <view class="addr">
                  {{ userAddr.province }}{{ userAddr.city }}{{ userAddr.area
                  }}{{ userAddr.addr }}
                </view>
                <view class="arrow" />
              </view>
            </view>
          </view>
          <!-- 文件上传功能 -->
          <view class="file-upload-section">
            <view class="upload-header">
              <text class="sku-kind">备注文件上传</text>
              <text class="upload-tip">（选填，支持任意格式）</text>
            </view>
            <view class="upload-area">
              <view
                class="upload-btn"
                @tap="chooseFile"
                v-if="uploadFiles.length < 5"
              >
                <u-icon name="plus" size="48" color="#999"></u-icon>
                <text class="upload-text">选择文件</text>
              </view>
              <view class="file-list">
                <view
                  v-for="(file, index) in uploadFiles"
                  :key="index"
                  class="file-item"
                >
                  <view class="file-info">
                    <view class="file-details">
                      <text class="file-name">{{ file.name }}</text>
                      <text class="file-status">
                        <text v-if="file.uploading">上传中...</text>
                        <text v-else-if="file.uploaded" style="color: #52c41a"
                          >上传成功</text
                        >
                        <text v-else-if="file.error" style="color: #ff4757"
                          >上传失败</text
                        >
                        <text v-else>等待上传</text>
                      </text>
                    </view>
                  </view>
                  <view class="file-actions">
                    <text class="file-size">{{
                      formatFileSize(file.size)
                    }}</text>
                    <u-icon
                      name="close"
                      size="24"
                      color="#ff4757"
                      @tap="removeFile(index)"
                    ></u-icon>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </up-form>
      </view>
    </scroll-view>

    <!-- 底部按钮区 -->
    <view class="bottom-buttons">
      <u-button
        v-if="currentStep > 0"
        @click="prevStep"
        type="default"
        class="prev-btn"
        >上一步</u-button
      >
      <!-- 添加费用总计显示 -->
      <view class="total-cost" v-if="currentStep < steps.length - 1">
        <text class="total-label">费用总计：</text>
        <text class="total-amount">¥{{ totalCost.toFixed(2) }}</text>
      </view>
      <u-button @click="submitForm" type="primary" class="submit-btn"
        >提交预约</u-button
      >
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { useRouter } from "vue-router";

// 转为响应式数据
const jsonData = ref([]);
const configJson = ref("");

const router = useRouter();
const uForm = ref(null);
let prodId = ref(0);

/**
 * 生命周期函数--监听页面加载
 */
onLoad((options) => {
  console.log(options);
  const pages = getCurrentPages();
  const currPage = pages[pages.length - 1];
  if (currPage.selAddress === "yes") {
    // 将携带的参数赋值
    userAddr.value = currPage.item;
  }

  prodId.value = options.prodid;
  // 加载商品数据
  getProdInfo();
  // 获取收货地址信息
  getReceiveAddr();
});
// 当前步骤
const currentStep = ref(0);

// 步骤列表
const steps = [
  { title: "样品信息" },
  { title: "测试要求" },
  { title: "预约信息" },
];

// 是否需要云视频
const needCloudVideo = ref(false);
const needCloudVideoFunc = (item) => {
  needCloudVideo.value = true;
  item.value = 60;
  calcPrice();
};
// 不需要云视频
const dontNeedCloudVideo = (item) => {
  needCloudVideo.value = false;
  item.value = 0;
  calcPrice();
};

// 预约须知
const showNotice = ref(false);
// 表单数据
const formData = reactive({
  sampleCount: 1,
  sampleNo: "",
  sampleName: "",
  sampleStatus: "",
  sampleForm: [],
  testElements: "",
  needStandardSample: false,
  testRequirements: "",
  reservationDate: "",
  reservationTime: "",
  contactPhone: "",
  remarks: "",
});

// 表单验证规则
const rules = reactive({
  sampleCount: { required: true, message: "请输入样品数量", trigger: "blur" },
  sampleNo: {
    type: "string",
    required: true,
    message: "请输入样品编号",
    trigger: ["blur"],
  },
  sampleName: { required: true, message: "请输入样品名称", trigger: ["blur"] },
  mobile: [
    {
      required: true,
      message: "请输入联系电话",
      trigger: "blur",
    },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
  reservationDate: [
    { required: true, message: "请选择预约日期", trigger: "change" },
  ],
  reservationTime: [
    { required: true, message: "请选择预约时段", trigger: "change" },
  ],
});

const skuList = ref([]);
const brief = ref("");
const prodNum = ref(1);
const pic = ref("");
const imgs = ref("");
const prodName = ref("");
const price = ref(0);
const content = ref("");
/**
 * 获取商品信息
 */
const getProdInfo = () => {
  uni.showLoading();
  http
    .request({
      url: "/prod/prodInfo",
      method: "GET",
      data: {
        prodId: prodId.value, // userType: 0
      },
    })
    .then(({ data }) => {
      uni.hideLoading();
      if (!data) {
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
        return;
      }
      imgs.value = data.imgs?.split(",");
      content.value = util.formatHtml(data.content);
      price.value = data.price;
      prodName.value = data.prodName;
      prodId.value = data.prodId;
      brief.value = data.brief;
      skuList.value = data.skuList;
      pic.value = data.pic;
      configJson.value = data.configJson;
      jsonData.value = JSON.parse(data.configJson);
      // 组装sku
      console.log(jsonData.value, "jsonData.value");
      groupSkuProp(data.skuList, data.price);
      calcPrice();
      uni.hideLoading();
    });
};

/**
 * 获取收货地址信息
 */
const getReceiveAddr = () => {
  http
    .request({
      url: "/p/address/addrInfo/getReceiveAddr",
      method: "GET",
    })
    .then(({ data }) => {
      if (data) {
        receiveAddr.value = {
          receiver: data.receiver,
          mobile: data.mobile,
          addr: data.addr
        };
      }
    })
    .catch((err) => {
      console.log("获取收货地址失败:", err);
    });
};

let selectedPropObjList = null;
const skuGroup = ref({});
const defaultSku = ref(null);
const selectedPropObj = ref({});
const propKeys = ref([]);
const allProperties = ref([]);
const findSku = ref(true);
const skuGroupList = ref([]);
const receiveAddr = ref({}); // 收货地址信息
/**
 * 组装SKU
 */
const groupSkuProp = (skuList, defaultPrice) => {
  if (skuList.length === 1 && !skuList[0].properties) {
    defaultSku.value = skuList[0];
    findSku.value = true;
    return;
  }
  const _skuGroupList = [];
  const skuGroupParam = {};
  const _allProperties = [];
  const _propKeys = [];
  const _selectedPropObj = {};
  const selectedPropObjListParam = [];

  let defaultSkuParam = null;
  for (let i = 0; i < skuList.length; i++) {
    let isDefault = false;
    if (!defaultSkuParam && skuList[i].price == defaultPrice) {
      defaultSkuParam = skuList[i];
      isDefault = true;
    }
    const properties = skuList[i].properties; // 版本:公开版;颜色:金色;内存:64GB
    _allProperties.push(properties);
    const propList = properties.split(";"); // ["版本:公开版","颜色:金色","内存:64GB"]
    for (let j = 0; j < propList.length; j++) {
      const propval = propList[j].split(":"); // ["版本","公开版"]
      let props = skuGroupParam[propval[0]]; // 先取出 版本对应的值数组
      // 如果当前是默认选中的sku，把对应的属性值 组装到selectedProp
      if (isDefault) {
        _propKeys.push(propval[0]);
        _selectedPropObj[propval[0]] = propval[1];
        const selectedPropObjItem = {};
        selectedPropObjItem[propval[0]] = propval[1];

        // 给jsonData赋初始值
        const findItem = jsonData.value.find(
          (item1) => propval[0] === item1.name
        );
        if (findItem) {
          findItem.value = propval[1];
        }

        selectedPropObjListParam.push(selectedPropObjItem);
      }
      if (!props) {
        props = []; // 假设还没有版本，新建个新的空数组
        props.push(propval[1]); // 把 "公开版" 放进空数组
      } else {
        if (props.indexOf(propval[1]) === -1) {
          // 如果数组里面没有"公开版"
          props.push(propval[1]); // 把 "公开版" 放进数组
        }
      }
      skuGroupParam[propval[0]] = props; // 最后把数据 放回版本对应的值
      const propListItem = {};
      propListItem[propval[0]] = props;
      _skuGroupList.push(propListItem);
    }
  }
  defaultSku.value = defaultSkuParam;
  propKeys.value = _propKeys;
  selectedPropObj.value = _selectedPropObj;
  skuGroup.value = skuGroupParam;
  selectedPropObjList = selectedPropObjListParam;
  skuGroupList.value = unique(_skuGroupList);
  allProperties.value = _allProperties;
  console.log(skuGroup.value, "====", propKeys.value, defaultSku.value);

  parseSelectedObjToVals(skuList);
};
/**
 * 减数量
 */
const onCountMinus = () => {
  if (prodNum.value > 1) {
    prodNum.value = prodNum.value - 1;
  }
};

/**
 * 加数量
 */
const onCountPlus = () => {
  if (prodNum.value < 1000) {
    prodNum.value = prodNum.value + 1;
  }
};

const selectedPropList = ref([]);
// 添加费用总计响应式变量
const totalCost = ref(0);

// 计算是否需要显示收货地址
const showDeliveryAddr = computed(() => {
  const needReturnItem = jsonData.value.find(
    (item) => item.infoFrom === "needReturn"
  );
  return needReturnItem && needReturnItem.value === true;
});
/**
 * 将已选的 {key:val,key2:val2}转换成 [val,val2]
 */
const parseSelectedObjToVals = (skuList) => {
  console.log(skuList, "skuList=====");

  const selectedPropObjListParam = selectedPropObjList;
  let selectedPropertiesParam = "";
  const selectedPropListParam = [];
  const selectedPropShowListParam = [];
  for (let i = 0; i < selectedPropObjListParam.length; i++) {
    const selectedPropObjItem = selectedPropObjListParam[i];
    for (const key in selectedPropObjItem) {
      if (Object.hasOwnProperty.call(selectedPropObjItem, key)) {
        selectedPropListParam.push(key + ":" + selectedPropObjItem[key]);
        selectedPropShowListParam.push(selectedPropObjItem[key]);
        selectedPropertiesParam += key + ":" + selectedPropObjItem[key] + ";";
      }
    }
  }
  selectedPropertiesParam = selectedPropertiesParam.substring(
    0,
    selectedPropertiesParam.length - 1
  );
  selectedPropList.value = selectedPropListParam;
  selectedPropObjList = selectedPropObjListParam;
  let findSkuParam = false;
  console.log(findSkuParam, "findSkuParam");

  for (let i = 0; i < skuList.length; i++) {
    if (skuList[i].properties == selectedPropertiesParam) {
      findSkuParam = true;
      defaultSku.value = skuList[i];
      break;
    }
  }
  findSku.value = findSkuParam;
  console.log(selectedPropList.value, "selectedPropList.value");
  if (!findSkuParam) {
    // 获取当前已选择的规格项名称
    const selectedSpecs = selectedPropList.value.map(prop => {
      const parts = prop.split(':');
      return parts[1] || prop;
    }).join('、');

    // 获取可选的规格组合
    const availableCombos = skuList.map(sku => {
      return sku.properties.split(';').map(prop => {
        const parts = prop.split(':');
        return parts[1] || prop;
      }).join('、');
    });

    uni.showToast({
      title: `规格组合"${selectedSpecs}"不可用`,
      icon: "none",
      duration: 3000
    });
    return;
  }

  calcPrice();
};

/**
 * 规格点击事件
 */
const toChooseItem = (skuGroupItemIndex, skuLineItem, key) => {
  console.log(skuGroupItemIndex, skuLineItem, key);

  // XRD产品制样方式依赖选择限制
  if (prodName.value && prodName.value.includes("XRD") && key === "制样方式" && skuLineItem === "粉末研磨") {
    // 检查jsonData中"样品形态"选项是否选择了"粉末"
    const sampleFormItem = jsonData.value.find(item => item.name === "样品形态");
    const hasPowderInSampleForm = sampleFormItem && sampleFormItem.value && sampleFormItem.value.find(option => option.name === "粉末" && option.select == true);

    if (!hasPowderInSampleForm) {
      uni.showToast({
        title: "选择粉末研磨前，请先选择样品形态为粉末",
        icon: "none",
        duration: 2500,
      });
      return; // 阻止选择
    }
  }

  selectedPropObjList[skuGroupItemIndex][key] = skuLineItem;
  selectedPropObj.value[key] = skuLineItem;
  parseSelectedObjToVals(skuList.value);
  const findItem = jsonData.value.find((item) => {
    return item.name == key;
  });
  if (findItem) {
    findItem.value = skuLineItem;
  }
};
/**
 * 去重
 */
const unique = (arr) => {
  const map = {};
  arr.forEach((item) => {
    const obj = {};
    Object.keys(item)
      .sort()
      .map((key) => (obj[key] = item[key]));
    map[JSON.stringify(obj)] = item;
  });
  return Object.keys(map).map((key) => JSON.parse(key));
};

// 跳转到选择元素
const toChooseElements = (item) => {
  // 保存当前页面状态到globalData
  const app = getApp();
  if (app) {
    app.globalData.reservationFormData = {
      formData: formData.value,
      jsonData: jsonData.value,
      prodNum: prodNum.value,
      needCloudVideo: needCloudVideo.value,
    };
  }

  // 使用事件通道进行页面间通信
  uni.navigateTo({
    url: "/pages/periodicTable/periodicTable",
    events: {
      acceptDataFromOpenedPage: (data) => {
        handleSelectedElements(data.data);
      },
    },
    success: (res) => {
      // 如果需要，可以在这里通过eventChannel发送初始数据
    },
  });
};

// 修改handleSelectedElements函数，从globalData获取数据
const handleSelectedElements = (elements) => {
  // 从globalData获取保存的数据
  const app = getApp();
  if (app && app.globalData.reservationFormData) {
    const savedData = app.globalData.reservationFormData;
    formData.value = savedData.formData;
    jsonData.value = savedData.jsonData;
    prodNum.value = savedData.prodNum;
    needCloudVideo.value = savedData.needCloudVideo;

    // 清除保存的数据
    app.globalData.reservationFormData = null;
  }

  // 处理选择的元素
  const elementItem = jsonData.value.find(
    (item) => item.infoFrom === "elements"
  );
  console.log(elementItem, "elementItem", elements);
  if (elementItem) {
    elementItem.value = elements.map((e) => ({
      id: e.atomicNumber,
      name: e.name,
      symbol: e.symbol,
    }));
  }

  // 重新计算价格
  calcPrice();
};

// 添加onShow生命周期钩子，处理从globalData恢复数据
onShow(() => {
  console.log(jsonData.value, "onshow");

  // 检查是否有从globalData恢复的数据
  const app = getApp();
  if (
    app &&
    app.globalData.selectedElements &&
    app.globalData.selectedElements.length > 0
  ) {
    const elements = app.globalData.selectedElements;
    // 找到元素项并赋值
    const elementItem = jsonData.value.find(
      (item) => item.choseType === "elements"
    );
    console.log(elements, "elements", elementItem);
    if (elementItem) {
      elementItem.value = elements.map((e) => ({
        id: e.atomicNumber,
        name: e.name,
        symbol: e.symbol,
        select: true,
      }));
      console.log(elementItem.value, "elementItem.value");
    }

    // 重新计算价格
    // calcPrice()

    // 清除globalData中的数据
    app.globalData.selectedElements = [];
  }
});

// 是否需要回收改变
const changeNeedReturn = (item, val) => {
  item.value = val;
  calcPrice();
};

// 上一步
const prevStep = () => {
  currentStep.value--;
};
const userAddr = ref(null);

// 文件上传相关变量
const uploadFiles = ref([]);
const maxFileSize = 10 * 1024 * 1024; // 10MB

// 下一步
const calcPrice = async () => {
  let addrId = 0;
  if (userAddr.value != null) {
    addrId = userAddr.value.addrId;
  }
  uni.showLoading({
    mask: true,
  });
  // const orderItem = JSON.parse(uni.getStorageSync("orderItem"));
  const extraFile = uploadFiles.value.map((item) => item.url).join(",");
  const orderItem = {
    sampleName: formData.sampleName,
    sampleNo: formData.sampleNo,
    prodId: prodId.value,
    skuId: defaultSku.value.skuId,
    prodCount: prodNum.value,
    contactPhone: formData.contactPhone,
    extraFile: extraFile,
    shopId: 1,
  };
  console.log(jsonData.value, "提交json配置项", orderItem);
  if (prodName.value === "三维X光成像系统（XRM）") {
    if (selectedPropList.value.some((prop) => prop.includes("分割"))) {
      jsonData.value[jsonData.value.length - 1].special = "XRMROI";
    } else {
      jsonData.value[jsonData.value.length - 1].special = "XRMNormal";
    }
  }

  if (selectedPropList.value.some((prop) => prop.includes("不处理"))) {
    const roiItem = jsonData.value.find((item) => item.name === "ROI次数");
    if(roiItem){
      roiItem.value = 0;
    }
  }

  orderItem.orderConfigJson = JSON.stringify(jsonData.value);

  uni.setStorageSync("orderItem", JSON.stringify(orderItem));
  console.log(orderItem, "提交数据");
  http
    .request({
      url: "/p/order/confirm",
      method: "POST",
      data: {
        addrId,
        orderItem: orderItem,
        couponIds: [],
        userChangeCoupon: 1,
      },
    })
    .then(({ data }) => {
      console.log(data, "提交数据");
      uni.hideLoading();
      userAddr.value = data.userAddr;
      totalCost.value = data.actualTotal;
    })
    .catch((err) => {
      console.log(err, "err");

      uni.hideLoading();
      // chooseCouponErrHandle(err);
    });
  // if (valid) {
  //   currentStep.value++;
  // }
};

const toggleSelect = (item, subitem, getPrice) => {
  console.log(item, subitem, getPrice);

  // 数据分析依赖选择规则：选择"成分定性分析"或"官能团半定量分析"时，必须先选择"官能团定性分析"
  if (item.name === "数据分析" && !subitem.select) {
    const targetOptions = ["成分定性分析", "官能团半定量分析"];
    const requiredOption = "官能团定性分析";

    // 如果当前尝试选择的是目标选项之一
    if (targetOptions.includes(subitem.name)) {
      // 检查是否已经选择了"官能团定性分析"
      const hasRequiredOption = item.value.some(option =>
        option.name === requiredOption && option.select === true
      );

      if (!hasRequiredOption) {
        uni.showToast({
          title: `请先选择"${requiredOption}"`,
          icon: "none",
          duration: 2500,
        });
        return; // 阻止选择
      }
    }
  }

  // 粉末与弱磁互斥校验
  // 检查当前是否已选择包含"粉末"的规格
  const hasPowder = selectedPropList.value.some(prop => prop.includes('粉末'));

  // 如果已选择粉末，且当前尝试选择弱磁相关选项
  if (hasPowder && !subitem.select && subitem.name.includes('弱磁')) {
    uni.showToast({
      title: "已选择粉末样品，不可选择弱磁选项",
      icon: "none",
      duration: 2500,
    });
    return; // 阻止选择
  }

  // 检查如果当前选择粉末，需要取消弱磁选项
  if (subitem.name.includes('粉末') && !subitem.select && jsonData.value.some(ss=>ss.name.includes('磁性'))) {
    // 查找包含弱磁的已选项并取消
    jsonData.value.forEach(dataItem => {
      if (dataItem.value && Array.isArray(dataItem.value)) {
        dataItem.value.forEach(option => {
          if (option.select && option.name.includes('弱磁')) {
            option.select = false;
          }
        });
      }
    });
    uni.showToast({
      title: "已自动取消弱磁选项",
      icon: "none",
      duration: 2000,
    });
  }

  // 弱磁与粉末互斥校验
  // 检查当前是否已选择弱磁相关选项
  const hasWeakMagnetic = selectedPropList.value.some(prop => prop.includes('弱磁'));

  // 如果已选择弱磁，且当前尝试选择粉末
  if (hasWeakMagnetic && !subitem.select && subitem.name.includes('粉末')) {
    uni.showToast({
      title: "已选择弱磁选项，不可选择粉末样品",
      icon: "none",
      duration: 2500,
    });
    return; // 阻止选择
  }

  // 瞬态稳态荧光光谱仪(PL)-常规荧光 互斥校验
  if (prodName.value === "瞬态稳态荧光光谱仪(PL)-常规荧光" && !subitem.select) {
    const exclusiveOptions = ["发射谱", "激发谱和发射谱"];

    // 如果当前选项是互斥选项之一
    if (exclusiveOptions.includes(subitem.name)) {
      // 检查是否两个互斥选项都被选中
      const selectedCount = item.value.filter(
        (opt) => exclusiveOptions.includes(opt.name) && opt.select === true
      ).length;

      // 如果已经有两个被选中（包括即将选中的这个）
      if (selectedCount >= 1) {
        uni.showToast({
          title: "发射谱和激发谱和发射谱不能同时选择",
          icon: "none",
          duration: 2000,
        });
        return; // 阻止选择
      }
    }
  }

  // 瞬态稳态荧光光谱仪(PL)-近红外测试 互斥校验
  if (prodName.value === "瞬态稳态荧光光谱仪(PL)-近红外测试" && !subitem.select) {
    const exclusiveOptions = ["近红外发射谱（600-1700nm）", "近红外激发谱和发射谱"];

    // 如果当前选项是互斥选项之一
    if (exclusiveOptions.includes(subitem.name)) {
      // 检查是否两个互斥选项都被选中
      const selectedCount = item.value.filter(
        (opt) => exclusiveOptions.includes(opt.name) && opt.select === true
      ).length;

      // 如果已经有两个被选中（包括即将选中的这个）
      if (selectedCount >= 1) {
        uni.showToast({
          title: "近红外发射谱（600-1700nm）和近红外激发谱和发射谱不能同时选择",
          icon: "none",
          duration: 2000,
        });
        return; // 阻止选择
      }
    }
  }


  if (item.choseType === "single") {
    // 单选模式下，先清空同组其他选项
    item.value.forEach((si) => {
      si.select = false;
    });
    // 选中当前选项
    subitem.select = true;
  } else {
    // 非单选模式下，保持原有的切换逻辑
    subitem.select = !subitem.select;
  }
  if (getPrice) {
    calcPrice();
  }
};

const submitForm = async () => {
  const valid = await uForm.value.validate();
  if (valid) {
    // 校验所有item.infoFrom为in且choseType为single或checkbox的数据，必须至少选择一项
    const inItems = jsonData.value.filter(
      (item) =>
        item.infoFrom === "in" &&
        (item.choseType === "single" || item.choseType === "checkbox")
    );

    for (const item of inItems) {
      const selectedCount = item.value.filter(
        (skuLineItem) => skuLineItem.select === true
      ).length;
      if (selectedCount === 0) {
        uni.showToast({
          title: `请选择${item.name}`,
          icon: "none",
          duration: 2000,
        });
        return;
      }
    }

    // 校验所有item.infoFrom为many的数据，必须至少选择一项
    const manyItems = jsonData.value.filter((item) => item.infoFrom === "many");

    for (const item of manyItems) {
      const selectedCount = item.value.filter(
        (manyItem) => manyItem.select === true
      ).length;
      if (selectedCount === 0) {
        uni.showToast({
          title: `请选择${item.name}`,
          icon: "none",
          duration: 2000,
        });
        return;
      }
    }

    // 校验是否需要回收，如果选择是则需要填写收货地址
    const needReturnItem = jsonData.value.find(
      (item) => item.infoFrom === "needReturn"
    );
    if (needReturnItem && needReturnItem.value === true && !userAddr.value) {
      uni.showToast({
        title: "请选择收货地址",
        icon: "none",
        duration: 2000,
      });
      return;
    }

    await calcPrice();

    // 获取已上传成功的文件URL（文件已在上传时完成）
    const uploadedFileUrls = await uploadFilesToServer();

    // 检查是否有正在上传的文件
    const uploadingFiles = uploadFiles.value.filter((file) => file.uploading);
    if (uploadingFiles.length > 0) {
      uni.showToast({
        title: "请等待文件上传完成",
        icon: "none",
        duration: 2000,
      });
      return;
    }

    // 检查是否有上传失败的文件
    const failedFiles = uploadFiles.value.filter((file) => file.error);
    // if (failedFiles.length > 0) {
    //   uni.showToast({
    //     title: "有文件上传失败，请处理",
    //     icon: "none",
    //     duration: 2000,
    //   });
    //   return;
    // }

    // 检查云视频时联系方式是否填写
    if (
      needCloudVideo.value &&
      (!formData.mobile || formData.mobile.trim() === "")
    ) {
      uni.showToast({
        title: "选择云视频时，联系方式为必填项",
        icon: "none",
        duration: 2000,
      });
      return;
    }

    // 将已上传的文件URL添加到表单数据中
    const orderData = {
      ...formData,
      uploadedFiles: uploadedFileUrls,
      configData: jsonData.value,
      selectedProps: selectedPropList.value,
      totalCost: totalCost.value,
      userAddress: userAddr.value,
    };

    // 存储订单数据到全局或传递到下一页
    uni.setStorageSync("reservationOrderData", orderData);

    uni.navigateTo({
      url: "/pages/submit-order/submit-order?orderEntry=1",
    });
  }
};

// 监听prodNum变化
watch(prodNum, (newVal, oldVal) => {
  calcPrice();
});

// 添加删除元素的方法
const removeElement = (item, elementToRemove) => {
  if (item.value && Array.isArray(item.value)) {
    item.value = item.value.filter(
      (element) => element.id !== elementToRemove.id
    );
    calcPrice(); // 重新计算价格
  }
};

const isShowName = (name) => {
  if (name === "ROI次数") {
    if (selectedPropList.value.some((prop) => prop.includes("不处理"))) {
      return "";
    }
    if (selectedPropList.value.some((prop) => prop.includes("分割"))) {
      return "ROI次数";
    } else {
      return "样品数";
    }
  } else if (name === "拼接次数") {
    if (selectedPropList.value.some((prop) => prop.includes("拼接测试"))) {
      return "拼接次数";
    } else {
      return "";
    }
  }

  return name;
};
/**
 * 去地址页面
 */
const toAddrListPage = () => {
  uni.navigateTo({
    url: "/pages/delivery-address/delivery-address?order=0",
  });
};

// 文件上传相关方法
const chooseFile = () => {
  // 使用条件判断来选择合适的API
  // #ifdef H5
  // H5环境使用input文件选择
  const input = document.createElement("input");
  input.type = "file";
  input.multiple = true;
  input.accept = "*/*";

  input.onchange = (e) => {
    const files = Array.from(e.target.files);
    files.forEach((file) => {
      if (file.size > maxFileSize) {
        uni.showToast({
          title: "文件大小不能超过10MB",
          icon: "none",
        });
        return;
      }

      // 创建临时文件对象
      const tempFile = {
        name: file.name,
        size: file.size,
        type: file.type,
        path: URL.createObjectURL(file),
        file: file,
        uploadProgress: 0,
        uploading: true,
        uploaded: false,
        url: "",
      };

      uploadFiles.value.push(tempFile);

      // 立即上传单个文件
      uploadSingleFile(tempFile, uploadFiles.value.length - 1);
    });
  };

  input.click();
  // #endif

  // #ifndef H5
  // 小程序环境使用chooseMessageFile
  if (typeof uni.chooseMessageFile === "function") {
    uni.chooseMessageFile({
      count: 5 - uploadFiles.value.length,
      type: "all",
      success: (res) => {
        const files = res.tempFiles;
        files.forEach((file, index) => {
          if (file.size > maxFileSize) {
            uni.showToast({
              title: "文件大小不能超过10MB",
              icon: "none",
            });
            return;
          }

          // 创建临时文件对象
          const tempFile = {
            name: file.name,
            size: file.size,
            type: file.type || "application/octet-stream",
            path: file.path,
            uploadProgress: 0,
            uploading: true,
            uploaded: false,
            url: "",
          };

          uploadFiles.value.push(tempFile);

          // 立即上传单个文件
          uploadSingleFile(tempFile, uploadFiles.value.length - 1);
        });
      },
      fail: (err) => {
        console.error("选择文件失败:", err);
        uni.showToast({
          title: "选择文件失败",
          icon: "none",
        });
      },
    });
  } else {
    // 降级使用chooseImage
    uni.chooseImage({
      count: 5 - uploadFiles.value.length,
      sizeType: ["original", "compressed"],
      sourceType: ["album", "camera"],
      success: (res) => {
        const files = res.tempFiles;
        files.forEach((file, index) => {
          if (file.size > maxFileSize) {
            uni.showToast({
              title: "文件大小不能超过10MB",
              icon: "none",
            });
            return;
          }

          // 创建临时文件对象
          const tempFile = {
            name: file.path.split("/").pop() || "image.jpg",
            size: file.size,
            type: "image/jpeg",
            path: file.path,
            uploadProgress: 0,
            uploading: true,
            uploaded: false,
            url: "",
          };

          uploadFiles.value.push(tempFile);

          // 立即上传单个文件
          uploadSingleFile(tempFile, uploadFiles.value.length - 1);
        });
      },
      fail: (err) => {
        console.error("选择图片失败:", err);
        uni.showToast({
          title: "选择图片失败",
          icon: "none",
        });
      },
    });
  }
  // #endif
};

const removeFile = (index) => {
  const file = uploadFiles.value[index];
  if (file && file.uploading) {
    uni.showToast({
      title: "文件正在上传中，请稍后删除",
      icon: "none",
    });
    return;
  }

  uploadFiles.value.splice(index, 1);
};

const getFileIcon = (file) => {
  const type = file.type || "";
  const name = file.name.toLowerCase();

  if (type.includes("image") || /\.(jpg|jpeg|png|gif|bmp|webp)$/.test(name)) {
    return "photo";
  } else if (type.includes("pdf") || name.endsWith(".pdf")) {
    return "document-text";
  } else if (
    type.includes("word") ||
    name.endsWith(".doc") ||
    name.endsWith(".docx")
  ) {
    return "document";
  } else if (
    type.includes("excel") ||
    name.endsWith(".xls") ||
    name.endsWith(".xlsx")
  ) {
    return "stats";
  } else if (
    type.includes("zip") ||
    type.includes("rar") ||
    /\.(zip|rar|7z|tar|gz)$/.test(name)
  ) {
    return "folder-zipper";
  } else if (type.includes("text") || name.endsWith(".txt")) {
    return "document-text";
  } else {
    return "document-attach";
  }
};

const formatFileSize = (bytes) => {
  if (bytes === 0) return "0 B";
  const k = 1024;
  const sizes = ["B", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
};
const baseApi = import.meta.env.VITE_APP_BASE_API;

const uploadSingleFile = async (file, index) => {
  try {
    uni.showLoading({
      title: `上传 ${file.name}...`,
      mask: true,
    });

    let uploadRes;

    // #ifdef H5
    // H5环境使用FormData上传
    const formData = new FormData();
    formData.append("file", file.file);
    formData.append("type", "reservation");

    uploadRes = await new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open("POST", baseApi + "/user/file/upload/element", true);
      xhr.onload = () =>
        resolve({
          statusCode: xhr.status,
          data: xhr.responseText,
        });
      xhr.onerror = reject;
      xhr.send(formData);
    });
    // #endif

    // #ifndef H5
    // 小程序环境使用uploadFile
    uploadRes = await new Promise((resolve, reject) => {
      uni.uploadFile({
        url: baseApi + "/user/file/upload/element",
        filePath: file.path,
        name: "file",
        formData: {
          type: "reservation",
        },
        success: resolve,
        fail: reject,
      });
    });
    // #endif

    uni.hideLoading();
    console.log(uploadRes, "==");

    if (uploadRes.statusCode === 200) {
      try {
        const data = JSON.parse(uploadRes.data);
        const uploadedUrl = data.data || "";

        if (uploadedUrl) {
          // 更新文件状态
          uploadFiles.value[index] = {
            ...uploadFiles.value[index],
            uploaded: true,
            uploading: false,
            url: uploadedUrl,
            uploadProgress: 100,
          };

          uni.showToast({
            title: `${file.name} 上传成功`,
            icon: "success",
            duration: 1500,
          });
        } else {
          throw new Error("上传成功但未返回文件URL");
        }
      } catch (parseError) {
        console.error("解析上传响应失败:", parseError);
        throw new Error("上传响应格式错误");
      }
    } else {
      throw new Error(`HTTP ${uploadRes.statusCode}`);
    }
  } catch (error) {
    uni.hideLoading();
    console.error("文件上传失败:", error);

    // 标记上传失败
    uploadFiles.value[index] = {
      ...uploadFiles.value[index],
      uploading: false,
      uploaded: false,
      error: true,
    };

    uni.showToast({
      title: `文件 ${file.name} 上传失败`,
      icon: "none",
      duration: 2000,
    });
  }
};

const uploadFilesToServer = async () => {
  // 只返回已上传成功的文件URL
  return uploadFiles.value
    .filter((file) => file.uploaded && file.url)
    .map((file) => file.url);
};
</script>

<style lang="scss" scoped>
@import "./reservation.scss";
.reservation-page {
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 元素选择区域样式 */
.elements-section {
  margin: 20rpx 0;
  padding: 20rpx;
  background: #f8fafc;
  border-radius: 12rpx;
  border: 1rpx solid #e2e8f0;

  .choose-elements-btn {
    margin-bottom: 20rpx;
    font-weight: 500;
    box-shadow: 0 2rpx 8rpx rgba(37, 99, 235, 0.15);
    transition: all 0.3s ease;

    &:active {
      transform: translateY(1rpx);
      box-shadow: 0 1rpx 4rpx rgba(37, 99, 235, 0.2);
    }
  }

  .selected-elements {
    margin-top: 20rpx;
    padding: 16rpx;
    background: #ffffff;
    border-radius: 8rpx;
    border: 1rpx solid #e2e8f0;

    .selected-label {
      display: block;
      margin-bottom: 12rpx;
      font-size: 26rpx;
      color: #374151;
      font-weight: 600;
    }

    .elements-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8rpx;

      .element-tag {
        animation: fadeInUp 0.4s ease-out;
        margin: 4rpx 0;
      }
    }
  }

  .elements-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40rpx;
    color: #9ca3af;
    font-size: 26rpx;
    background: #ffffff;
    border-radius: 8rpx;
    border: 1rpx dashed #d1d5db;

    u-icon {
      margin-right: 8rpx;
    }

    text {
      margin-left: 8rpx;
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.notice-container {
  padding: 10rpx 30rpx;
  font-size: 24rpx;
  background-color: #edf5ff;
  border: 1rpx solid #2b8afd;
  transition: all 0.3s ease-in-out;

  .notice-title {
    display: flex;
    align-items: center;
    color: #2b8afd;
    font-weight: bold;
  }

  .notice-content {
    margin-top: 20rpx;
  }
}

.steps-bar {
  padding: 30rpx;
  background-color: #fff;
}

.price-text {
  color: #ff4d4f;
  font-size: 30rpx;
  margin-left: 20rpx;
}

.form-scroll {
  height: calc(100vh - 440rpx);
  background-color: #fff;
  margin-top: 20rpx;
}

.form-container {
  padding: 10rpx 30rpx;
}

.bottom-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.prev-btn {
  flex: 0 0 200rpx;
  margin-right: 20rpx;
}

.next-btn,
.submit-btn {
  flex: 0 0 200rpx;
}

.total-cost {
  flex: 1;
  text-align: right;
  padding-right: 30rpx;
}

.total-label {
  color: #666;
  font-size: 28rpx;
  margin-right: 10rpx;
}

.total-amount {
  color: #ff4d4f;
  font-size: 32rpx;
  font-weight: bold;
}

.notice-item {
  display: flex;
  align-items: flex-start;
  padding: 20rpx 24rpx;
  background: linear-gradient(135deg, #fff8e1 0%, #fff8e1 100%);
  border-left: 4rpx solid #ff9500;
  border-radius: 8rpx;
  margin: 16rpx 0;
  box-shadow: 0 2rpx 8rpx rgba(255, 149, 0, 0.1);
  animation: fadeInLeft 0.3s ease-out;
}

.notice-text {
  font-size: 26rpx;
  color: #333;
  line-height: 1.6;
  flex: 1;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20rpx);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.delivery-addr {
  .addr-bg {
    .add-addr {
      .plus-sign {
        color: #0f3679;
        border: 2rpx solid #0f3679;
        padding: 0rpx 6rpx;
        margin-right: 10rpx;
      }
      font-size: 28rpx;
      color: #666;
      display: flex;
      align-items: center;
      padding: 30rpx 0;
    }
    padding: 0 30rpx;
  }
  .addr-bg.whole {
    padding: 0 39rpx 0 77rpx;
  }
}
.addr-bg {
  .add-addr {
    .plus-sign-img {
      width: 32rpx;
      height: 32rpx;
      font-size: 0;
      margin-right: 10rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.delivery-addr {
  position: relative;
  background: #fff;
  .addr-icon {
    width: 32rpx;
    height: 32rpx;
    display: block;
    position: absolute;
    left: 30rpx;
    top: 24rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .user-info {
    padding-top: 20rpx;
    line-height: 48rpx;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    .item {
      font-size: 30rpx;
      margin-right: 30rpx;
      vertical-align: top;
      display: inline-block;
    }
  }
  .addr {
    font-size: 26rpx;
    line-height: 36rpx;
    color: #999;
    width: 90%;
    padding-bottom: 20rpx;
    margin-top: 15rpx;
    word-wrap: break-word;
  }
  .arrow {
    width: 15rpx;
    height: 15rpx;
    border-top: 2rpx solid #777;
    border-right: 2rpx solid #777;
    transform: rotate(45deg);
    position: absolute;
    right: 30rpx;
    top: 60rpx;
  }
  .arrow.empty {
    top: 39rpx;
  }
}
</style>
